<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>

            body {
                background-color: #969896;
            }

            .card {
                margin: 100px auto;
                width: 234px;
                background-color: pink;
                position: relative;
            }

            .card .product {
                display: block;
            }


            .content {
                padding: 20px;
                background-color: white;
            }

            .content h3 {
                font-weight: 400;
                font-size: 15px;
            }

            .content p {
                font-size: 12px;
                margin-top: 20px;
                color: #999999;
            }

            .content span {
                color: orange;
            }

            .card .hot {
                position: absolute;
                right: -4px;
                top: 5px;
            }


        </style>
    </head>
    <body>


        <div class="card">

            <img class="product" src="images/product.png">

            <div class="content">

                <h3>Android网络图片加载框架详解</h3>

                <p><span>高级</span> • 1125人在学习</p>

            </div>

            <img class="hot" src="images/hot.png">

        </div>


    </body>
</html>